import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:word_range_client/pojo/vo/WordBookVo.dart';

import '../../pages/PadView.dart';
import '../../pages/PhoneView.dart';
import '../../pages/WindowsView.dart';
import '../../pages/general/BookInfo.dart';

/// 表示一个词书列表项的组件。
///
/// 该组件用于展示词书的基本信息，并提供详情和切换按钮。
class BookListItem extends StatelessWidget {
  const BookListItem({super.key, required this.wordBookVo});

  /// 词书的数据对象，包含词书的名称、描述等信息。
  final WordBookVo wordBookVo;

  @override
  Widget build(BuildContext context) {
    // 构建菜单按钮，包括详情按钮和切换按钮
    List<Widget> menu = [
      _InfoButton(id: wordBookVo.id!,),
      const SizedBox(width: 8,),
      _ChangeButton(wordBookVo: wordBookVo,),
    ];

    // 返回词书列表项的主体部分
    return Hero(
        tag: "Book_${wordBookVo.id}",
        child: _ItemBody(
          title: wordBookVo.name!,
          subTitle: wordBookVo.description,
          textColor: Theme.of(context).colorScheme.onSecondary,
          bgColor: Theme.of(context).colorScheme.primary,
          menu: menu,
        )
    );
  }
}

/// 表示已选词书的卡片项组件。
///
/// 该组件用于展示用户已选择的词书信息。
class SelectedBookCardItem extends StatelessWidget {
  const SelectedBookCardItem({super.key});

  /// 根据屏幕宽度获取响应式字体大小。
  double getResponsiveFontSize(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    if (width > 1300) return 18;
    if (width > 800) return 17;
    return 16;
  }

  @override
  Widget build(BuildContext context) {
    // 构建菜单按钮，显示“您已选择”文本
    List<Widget> menu = [
      Text(
        "您已选择",
        style: TextStyle(
            color: Theme.of(context).colorScheme.onSecondary,
            fontSize: getResponsiveFontSize(context)
        ),
      )
    ];

    // 返回已选词书卡片项的主体部分
    return Hero(
        tag: "SelectedBook",
        child: _ItemBody(
          title: "默认词书123",
          subTitle: "默认词书123,我是子标题",
          textColor: Theme.of(context).colorScheme.onSecondary,
          bgColor: Theme.of(context).colorScheme.primary,
          menu: menu,
        )
    );
  }
}

/// 表示词书列表项或已选词书卡片项的主体部分。
///
/// 该组件用于展示词书的标题、子标题以及菜单按钮。
class _ItemBody extends StatelessWidget {
  const _ItemBody({super.key, required this.title, this.subTitle, required this.textColor, required this.bgColor, required this.menu});

  /// 词书的标题。
  final String title;

  /// 词书的子标题，可选。
  final String? subTitle;

  /// 文本颜色。
  final Color textColor;

  /// 背景颜色。
  final Color bgColor;

  /// 菜单按钮列表。
  final List<Widget> menu;

  @override
  Widget build(BuildContext context) {
    // 返回一个卡片组件，包含词书的标题、子标题和菜单按钮
    return Card(
        shape: RoundedRectangleBorder(              // 形状
            borderRadius: BorderRadius.circular(15)   // 圆角
        ),
        elevation: 3,
        color: bgColor,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(17, 12, 17, 12),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _BookName(
                textColor: textColor,
                title: title,
              ),
              _BookSubTitle(
                textColor: textColor,
                subTitle: subTitle,
              ),
              const SizedBox(),   // 这只是几个占位用的
              const SizedBox(),
              const SizedBox(),
              const SizedBox(),
              const SizedBox(),
              const SizedBox(),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: menu,
              )
            ],
          ),
        )
    );
  }
}

/// 表示词书标题的组件。
///
/// 该组件用于展示词书的标题，并根据屏幕宽度调整字体大小。
class _BookName extends StatelessWidget {
  const _BookName({super.key, required this.textColor, required this.title});
  final Color textColor;
  final String title;

  /// 根据屏幕宽度获取响应式字体大小。
  double getResponsiveFontSize(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    if (width > 1300) return 20;
    if (width > 800) return 19;
    return 17;
  }

  @override
  Widget build(BuildContext context) {
    // 返回词书标题的文本组件
    return Text(
      title,
      style: TextStyle(
          color: textColor,
          fontSize: getResponsiveFontSize(context),
          fontWeight: FontWeight.w500
      ),
    );
  }
}

/// 表示词书子标题的组件。
///
/// 该组件用于展示词书的子标题，并根据屏幕宽度调整字体大小。
class _BookSubTitle extends StatelessWidget {
  const _BookSubTitle({super.key, required this.textColor, this.subTitle});
  final Color textColor;
  final String? subTitle;

  /// 根据屏幕宽度获取响应式字体大小。
  double getResponsiveFontSize(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    if (width > 1300) return 18;
    if (width > 800) return 16;
    return 14;
  }

  @override
  Widget build(BuildContext context) {
    // 返回词书子标题的文本组件
    return Text(
      subTitle != null ? subTitle! : "本书暂无子标题",
      style: TextStyle(
          color: textColor,
          fontSize: getResponsiveFontSize(context),
          fontWeight: FontWeight.w300
      ),
    );
  }
}

/// 表示详情按钮的组件。
///
/// 该组件用于跳转到词书详情页面。
class _InfoButton extends StatefulWidget {
  const _InfoButton({super.key, required this.id});
  final String id;

  @override
  State<_InfoButton> createState() => _InfoButtonState();
}

class _InfoButtonState extends State<_InfoButton> {

  /// 跳转到词书详情页面。
  void _toBookInfoPage(){
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => BookInfoPage(id: widget.id),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // 返回详情按钮的组件
    return SizedBox(
      height: 21, width: 60,
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          padding: EdgeInsets.zero, // 移除内边距
          backgroundColor: Theme.of(context).colorScheme.onPrimary.withAlpha(300)
        ),
        onPressed: _toBookInfoPage,
        child: Text(
            "详情",
          style: TextStyle(
            color: Theme.of(context).colorScheme.onSecondary,
          ),
        ),
      ),
    );
  }
}

/// 表示切换按钮的组件。
///
/// 该组件用于切换当前选择的词书。
class _ChangeButton extends StatefulWidget {
  const _ChangeButton({super.key, required this.wordBookVo});
  final WordBookVo wordBookVo;

  @override
  State<_ChangeButton> createState() => _ChangeButtonState();
}

class _ChangeButtonState extends State<_ChangeButton> {

  Future<void> toHomePage() async {
    final prefs = await SharedPreferences.getInstance();
    final isDarkMode = prefs.getBool('isDarkMode') ?? false;

    if(Platform.isAndroid){
      final bool isMobileLayout = MediaQuery.of(context).size.width < 600;
      if(isMobileLayout){
        Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => PhoneView(isDarkMode: isDarkMode)));
      }else{
        Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => PadView(isDarkMode: isDarkMode)));
      }
    }else{   // 目前只支持安卓、Windows
      Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => WindowsView(isDarkMode: isDarkMode)));
    }
  }

  /// 切换当前选择的词书，并将选择结果保存到本地存储。
  Future<void> _changeBook() async {
    final prefs = await SharedPreferences.getInstance();
    String jsonString = jsonEncode(widget.wordBookVo.toJson());
    prefs.setString("selectBook", jsonString);
    prefs.remove("last_learning_completion_time");
    prefs.remove("last_review_completion_time");
    prefs.remove("cached_word_list");
    prefs.remove("cached_review_word_list");
    toHomePage();
  }

  @override
  Widget build(BuildContext context) {
    // 返回切换按钮的组件
    return SizedBox(
      height: 21, width: 60,
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
            padding: EdgeInsets.zero, // 移除内边距
            backgroundColor: Colors.white.withAlpha(70)
        ),
        onPressed: (){
          _changeBook();
        },
        child: Text(
          "切换",
          style: TextStyle(color: Theme.of(context).colorScheme.onSecondary ),
        ),
      ),
    );
  }
}
